<template>
	<div class="introduce">
		<div class="headTitle">
	   <div class="imgTextDetails" @click="clickImgText" :class="ImgText ? 'ImgTextactive' : ''">图文详情</div>
	   <div class="productParametersDetails" @click="clickProduct" :class="ProductPramates ? 'Productactive' : ''">产品参数</div>
	    </div>
	    <imgTextInfomation :productInformation="productInformation" v-show="panelImgText"></imgTextInfomation>
	    <productParameters :productInformation="productInformation" v-show="panelProduct"></productParameters>
	</div>	
</template>

<script>
import imgTextInfomation from '@/components/m-productinformation/imgTextInfomation'
import productParameters from '@/components/m-productinformation/productParameters'
	export default {
		name:'introduce',
		components: {
		   imgTextInfomation,
		   productParameters
       	},
		props:{
			productInformation:{}
		},
		data () {
			return {
				ImgText:true,
				ProductPramates:false,
				panelImgText:true,
				panelProduct:false
			}
		},
		created () {
			
		},
		mounted () {
			
		},
		methods: {
			clickImgText () {
				this.ImgText = true;
				this.ProductPramates = false;
				this.panelImgText = true;
				this.panelProduct = false;
			},
			clickProduct () {
				this.ImgText = false;
				this.ProductPramates = true;
				this.panelImgText = false;
				this.panelProduct = true;
			}
		}
	}
</script>

<style lang="less" scoped>
	.introduce{
		width:100%;
		font-size: 28px;
		.headTitle{
			display: flex;
			width:100%;
			background: white;
			text-align: center;
			color:  gray;
			height: 80px;
			margin:20px 0;
			.imgTextDetails{
				height: 80px;
				line-height: 80px;
				flex: 1;
				&.ImgTextactive{
                    border-bottom: 3px solid red;
                    color: red;
                } 
			}
			.productParametersDetails{
				height: 80px;
				line-height: 80px;
				flex: 1;
				&.Productactive{
                    border-bottom: 3px solid red;
                    color: red;
                } 
			}
		}
		
	}
</style>